<template>
  <div class="recommendGood">
    <div class="recommendGood-inner">
      <div class="recommendGood-inner-left">
        <p>{{ goodInfo.subjectName }}</p>
        <strong>借款利率：{{ goodInfo.borrowAwardRate + goodInfo.borrowRate }}%</strong>
        <span>出借期限：{{ goodInfo.borrowDay }}天</span>
      </div>
      <div class="recommendGood-inner-right">
        <span @click="toGoodInfo">立即查看</span>
      </div>
    </div>
    <img :src="bg">
  </div>
</template>

<script>
  export default {
    data () {
      return {
        goodInfo: {},
        bg: require('assets/mnsy_biao@2x.png')
      }
    },
    methods: {
      toGoodInfo () {
        this.$router.push(`/goodDetail/${this.goodInfo.borrowOrder}`)
      }
    },
    created () {
      this.$http.get(`/api/borrow/borrowInfo/list?currentPage=1&numPerPage=1`)
        .then((res) => {
          if (res.data.success) {
            this.goodInfo = res.data.data.list[0]
          }
        })
        .catch((err) => {
          alert('请检查您的网络', err)
        })
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';
  .recommendGood {
    position: relative;
    top: 0;
    left: 0;
    border: 1px solid $base-ff6c00;
    border-radius: 10px;
    &-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px 20px 30px 72px;
      &-left {
        color: $base-ff6c00;
        p {
          font-size: 36px;
        }
        strong, span {
          display: block;
          margin-top: 20px;
          font-size: 26px;
        }
      }
      &-right {
        span {
          display: inline-block;
          width: 140px;
          height: 56px;
          border-radius: 6px;
          background: $base-ff6c00;
          line-height: 64px;
          color: $base-fff;
          font-size: 26px;
          text-align: center;
        }
      }
    }
    img {
      position: absolute;
      top: -8px;
      left: -8px;
      width: 90px;
    }
  }
</style>
